<template>
  <div :class="prefixCls + 'demo'">
    <BasicForm @register="registerForm" />
    <a-tabs v-model:activeKey="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="客户信息" key="jeecgOrderCustomerForm" :forceRender="true">
        <JeecgOrderCustomerForm ref="jeecgOrderCustomerFormRef" :formData="formData" />
      </a-tab-pane>

      <a-tab-pane tab="机票信息" key="jeecgOrderTicket" :forceRender="true">
        <JVxeTable
          v-if="ok"
          ref="jeecgOrderTicketRef"
          stripe
          rowSelection
          keepSource
          :maxHeight="300"
          :loading="table2.loading"
          :columns="table2.columns"
          :dataSource="table2.dataSource"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { BasicForm, useForm } from "/@/components/Form/index"
  import { computed, defineComponent, ref, reactive } from "vue"
  import { defHttp } from "/@/utils/http/axios"
  import { propTypes } from "/@/utils/propTypes"
  import { getBpmFormSchema, jeecgOrderTicketColumns } from "../data"
  import JeecgOrderCustomerForm from "./JeecgOrderCustomerForm.vue"
  import { useDesign } from "/@/hooks/web/useDesign"

  export default defineComponent({
    name: "JeecgOrderMainForm",
    components: {
      BasicForm,
      JeecgOrderCustomerForm,
    },
    props: {
      formData: propTypes.object.def({}),
      formBpm: propTypes.bool.def(true),
    },
    setup(props) {
      const { prefixCls } = useDesign("flow")
      const [registerForm, { setFieldsValue, setProps, getFieldsValue, updateSchema }] = useForm({
        labelWidth: 150,
        schemas: getBpmFormSchema(props.formData),
        showActionButtonGroup: false,
        baseColProps: { span: 8 },
      })

      const formDisabled = computed(() => {
        if (props.formData.disabled === false) {
          return false
        }
        return true
      })

      const jeecgOrderCustomerFormRef = ref()
      const jeecgOrderTicketRef = ref()
      const ok = ref(false)

      let formData = {}
      const queryByIdUrl = "/test/jeecgOrderMain/queryById"
      async function initFormData() {
        console.log("props.formData", props.formData)
        let params = { id: props.formData.dataId }
        const data = await defHttp.get({ url: queryByIdUrl, params })
        console.log("data", data)
        formData = { ...data }
        //设置表单的值
        await setFieldsValue(formData)
        await setProps({ disabled: formDisabled.value })

        await jeecgOrderCustomerFormRef.value.initFormData(props.formData.dataId)
        await loadOrderTicketData(props.formData.dataId)
        ok.value = true
      }

      async function submitForm() {
        let data = getFieldsValue()
        let params = Object.assign({}, formData, data)
        console.log("表单数据", params)
        await saveOrUpdate(params, true)
      }

      initFormData()

      const activeKey = ref("jeecgOrderCustomerForm")
      function handleChangeTabs() {}
      // 机票信息
      const table2 = reactive({
        loading: false,
        dataSource: [],
        columns: filterSubTableColnmns(jeecgOrderTicketColumns, "order:"),
      })

      async function loadOrderTicketData(mainId) {
        const queryByIdUrl = "/test/jeecgOrderMain/queryOrderTicketListByMainId"
        let params = { id: mainId }
        table2.dataSource = []
        const data = await defHttp.get({ url: queryByIdUrl, params })
        if (data && data.length > 0) {
          table2.dataSource = [...data]
        }
      }

      //新增权限处理方法
      function filterSubTableColnmns(columns, pre) {
        let authList = props.formData.permissionList
        //注意：如果子表配置显示反向 这里不处理其逻辑  即隐藏无法在流程表单中实现，请使用全局表单权限实现
        let temp = columns.filter((item) => {
          let oneAuth = authList.find((auth) => {
            return auth.action === pre + item.key
          })
          if (!oneAuth) {
            return true
          }

          //代码严谨处理，防止一个授权标识，配置多次
          if (oneAuth instanceof Array) {
            oneAuth = oneAuth[0]
          }

          //禁用逻辑
          if (oneAuth.type == "2" && !oneAuth.isAuth) {
            item["disabled"] = true
            return true
          }
          //隐藏逻辑逻辑
          if (oneAuth.type == "1" && !oneAuth.isAuth) {
            return false
          }
          return true
        })
        return temp
      }

      return {
        prefixCls,
        registerForm,
        formDisabled,
        submitForm,
        jeecgOrderCustomerFormRef,
        activeKey,
        handleChangeTabs,
        table2,
        jeecgOrderTicketRef,
        ok,
      }
    },
  })
</script>

<style lang="less">
  /*.matu-flow-demo{
    .vxe-header--row{
        .vxe-header--column .vxe-cell{
            width: 180px !important;
        }
        .vxe-header--column:first-child .vxe-cell{
            width: 40px !important;
        }
    }
}*/
</style>
